{extend name="layout/layout" /}


{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<style>

		.detail{
			font-size: 14px;
		}

		.info{
			background: #fff;
			padding: 10px 0;
		}

		.detail > .info >*{
			padding: 0 10px
		}

		.content img{
			max-width: 100%;
			max-height: 100%;
		}

		.opear{
			height: 50px;
			background: #fff;
			border-top: 1px solid #eee;
			line-height: 50px;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
		}

		.cart{
			background: #f0ad4e;
			color:#fff;
		}

		.buy{
			background: #e60012;
			color:#fff;
		}

		.info .price{
			color:#e60012;
		}

		.sale-info{
			margin-top: 8px;
			padding: 10px;
			color:#8f8f94;
			background: #fff;
		}

		.sale-info .sale-title{
			padding-bottom: 5px;
		}
		.sale-detail>div{
			border-right: 1px solid #ccc;
		}

		.sale-detail>div:nth-child(3){
			border: none;
		}

		.favorite{
			line-height: 20px;
			padding-top: 5px;
		}
		.favorite .iconfont{
			font-size: 20px;
		}

		.favorite p{
			margin-bottom: 0;
			font-size:12px;
		}

		.mask{
			background: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
		}

		.mask .mask-container{
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
		}

		.mask .mask-container .mask-submit{
			background: #e60012;
			color:#fff;
			text-align: center;
			height: 45px;
			line-height: 45px;
		}

		.mask .mask-goods{
			padding: 10px 120px 10px;
			border-bottom: 1px solid #eee;
			min-height: 90px;
		}
		.mask .goods-img{
			top:-20px;
			left: 10px;
			position: absolute;
			width: 100px;
			height: 100px;
		}

		.mask .mask-spec{
			padding: 20px 10px;
			max-height: 300px;
			overflow-y: scroll;
			border-bottom: 1px solid #eee;
		}

		.mask .mask-spec .spec-title{
			padding: 10px 0;
		}

		.mask .spec-itme{
			padding: 5px 15px;
			background: #ccc;
			color:#333;
			border-radius: 5px;
			margin-right: 10px;
		}

		.mask .spec-itme.active{
			background: #e60012;
			color:#eee;
		}

		.mask .close{
			position: absolute;
			right: 10px;
			top:10px;
		}

		.mask .close .mui-icon{
			font-size: 30px;
		}

		.mask .number{
			padding: 15px;
		}

		.mask .number-container{
			border: 1px solid #ddd;
			border-radius: 4px;
		}

		.mask input{
			margin: 0;
			padding: 0 10px;
			height: 35px;
			border:none;
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
			width: 50px;
			text-align: center;
			font-size: 12px;
		}

		.mask .push, .mask .less{
			width: 35px;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}

		.mask .number-tips{
			line-height: 35px;
		}

		.content img{
			font-size: 0;
			display: block;
		}

		/*拼团样式开始*/
			.group-btns>div{
				height: 50px;
				font-size: 12px;
				line-height: 20px;
				padding-top: 5px;
			}

			.group-btns .one-buy{
				background: #F1ABA7;
				color: #fff;
				height: 50px;
			}
		/*拼团样式结束*/

		/*秒杀样式开始*/
			.spike-price{
				height: 50px;
				background: #F22127;
				color: #fff;
				display: flex;
				padding: 0;
			}

			.spike-price .price-number{
				flex: 1;
				display: flex;
			} 

			.spike-price .price-number .price{
				color: #fff;
				font-size: 20px;
				line-height: 50px;
				padding-right: 10px;
			}

			.spike-price .price-number .price .icon-price{
				font-size: 12px;
			}

			.spike-price .price-number .buy-number{
				padding-top: 10px;
				line-height: 16px;
			}

			.spike-price .price-number .buy-number>div{
				font-size: 12px;
			}

			.spike-price .price-number .shop-price{
				color: #F56870;
			}

			.progressbar{
				background: #F0C11B;
				color: #E7581E;
				padding: 0 10px;
				height: 22px;
				border-radius: 11px;
				line-height: 22px;
				position: relative;
				width: 120px;
			}

			.progressbar .bg{
				position: absolute;
				left: 0;
				top: 0;
				height: 22px;
				border-radius: 11px;
				line-height: 22px;
				background: #F9EE00;
			}

			.progressbar div{
				font-size: 10px;
			}

			.progressbar .info{
				position: absolute;
				left: 0;
				width: 100%;
				padding: 0 10px;
				z-index: 20;
				background: none;
			}

			.progressbar-box{
				padding: 10px 0;
				width: 120px;
			}
		/*秒杀样式结束*/

		.tags{
			display: flex;
			color: #fff;
			border-bottom: 1px solid #eee;
			margin-top: 10px;
		}

		.tags .tag{
			margin-right: 10px;
			font-size: 10px;
			padding: 2px 5px;
			margin-bottom: 5px;
		}


		/*拼团订单列表样式开始*/
			.group-order{
				margin-top: 8px;
				background: #fff;
			}

			.group-order .title{
				height: 40px;
				line-height: 40px;
				padding: 0 15px;
				border-bottom: 1px solid #eee;
			}

		    .order-swiper {
		      width: 100%;
		      height: 70px;
		    }

		    .order-swiper .swiper-slide{
				font-size: 12px;
		    }

		    .order-swiper .swiper-slide .order-item{
		    	display: flex;
		    	border-bottom: 1px solid #eee;
		    	padding: 10px;
		    	line-height: 40px;
		    }


		    .order-swiper .swiper-slide .avatar{
		    	width: 30px;
		    	margin-right: 5px;
		    	padding-top: 5px;
		    }

		    .order-swiper .swiper-slide .username{
		    	flex: 1;
		    	overflow: hidden;
		    }

		    .order-swiper .swiper-slide .number-time{
		    	line-height: 20px;
		    	font-size: 10px;
		    	width: 100px;
		    	text-align: center;
		    }

		    .order-swiper .add-group{
		    	background: #e60012;
		    	color: #fff;
		    	padding: 0 10px;
		    	height: 30px;
		    	line-height: 30px;
		    	font-size: 12px;
		    	border-radius: 4px;
		    	margin-left: 5px;
		    }

		    .name-share{
		    	display: flex;
		    	width: 100%;
		    }

		    .name-share .share{
				width: 50px;
				padding: 0 10px;
		    }

		    .name-share .name{
		    	flex: 1;
		    }

		/*拼团订单列表样式结束*/

	</style>
{/block}



{block name="main"}


	<div class="detail" v-cloak>
		 

		<div class="swiper-container banner-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-for="ban in detail.imgArray">
		        	<img :src="ban.image_url" class="img-responsive" />
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="banner-pagination"></div>
		</div>

		<div class="info">
			<div class="spike-price" v-if="active_type == 'spike'">
				<div class="price-number">
					<div class="price"><span class="icon-price">￥</span>{{goods_price}}</div>
					<div class="buy-number">
						<div class="shop-price"><del>￥{{detail.shop_price}}</del></div>
						<div class="buy-num">已抢{{detail.spike_info.buy_number}}件</div>
					</div>
				</div>
				<div class="progressbar-box">
					<div class="progressbar">
						<div class="bg" :style="'width:'+detail.spike_info.progressbar+'%'"></div>
						<div class="info">
							<div class="mui-pull-left">{{detail.spike_info.progressbar > 90?'即将售馨':'已抢'+ detail.spike_info.buy_number}}</div>
							<div class="mui-pull-right">{{detail.spike_info.progressbar}}%</div>
							<div class="mui-clearfix"></div>
						</div>
					</div>
				</div>
			</div>
			<p class="" v-else>
				<b class="price">￥{{goods_price}} </b>
				<del class="">￥{{detail.market_price}} </del>
				<span class="price">
					积分抵扣{{detail.point}}元
					VIP收益{{detail.sendmoney}}元
				</span>
			</p>

			<div class="name-share">
				<div class="name">{{detail.goods_name}}</div>
				<div class="share" @click="show_share"><img src="/assets/img/share.png" alt="" class="img-responsive"></div>
			</div>

			<p>{{detail.goods_remark}}</p>
			
			<div class="brand_name">{{detail.brand_name}}</div>
			<div class="business_name">{{detail.business_name}}</div>
		</div>

		<div class="group-order mui-hidden" >
			<div class="title">{{detail.group_info.order.length}}人在拼单</div>
		    <div class="order-swiper swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="order in detail.group_info.order">
						<div class="order-item">
							<div class="avatar">
								<img :src="order.avatar" class="img-responsive" alt="">
							</div>

							<div class="username">{{order.username}}</div>

							<div class="number-time">
								<div class="number">
								还差<span class="text-danger">{{order.limit_number-order.buy_number}}</span>人拼成
								</div>
								<div class="limit-time">{{order.obj_time}}</div>
							</div>

							<div class="add-group" @tap="addGroup(order.order_group_id)">去拼单</div>
						</div>
					</div>
				</div>
		    </div>
		</div>

		<div class="sale-info mui-text-center">
			<div class="sale-title">销售库存及浏览情况</div>
			<div class="sale-detail mui-row ">
				<div class="mui-col-xs-4">销量：<span class="text-theme">{{detail.sale_number}}</span></div>
				<div class="mui-col-xs-4">浏览量：<span class="text-theme">{{detail.click_count}}</span></div>
				<div class="mui-col-xs-4">库存：<span class="text-theme">{{detail.store_count}}</span></div>
			</div>
		</div>

		<div class="content mui-text-center" v-html="detail.content"></div>


	

		<div class="opear mui-row mui-text-center">
			<div class="mui-col-xs-2 favorite" v-if="detail.favorite == 1" @tap="cancelFavorite()">
				<i class="mui-icon iconfont icon-yiguanzhu text-theme"></i>
				<p>取消收藏</p>
			</div>

			<div class="mui-col-xs-2 favorite" v-else @tap="favorite()">
				<i class="mui-icon iconfont icon-weiguanzhu"></i>
				<p>收藏</p>
			</div>
			
			<div class="mui-col-xs-2 favorite" @tap="seller(detail.business_id)">
				<i class="mui-icon iconfont icon-dianpu"></i>
				<p>店铺</p>
			</div>
			<div class="mui-col-xs-8 mui-row group-btns" v-if="detail.active_type == 'group'">
				<div class="mui-col-xs-6 one-buy" @tap="one_buy()">
					<div class="group-price">￥{{detail.shop_price}}</div>
					<div class="group-tips">单独购买</div>
				</div>	
				<div class="mui-col-xs-6 group-buy buy" @tap="show_mask('buy')">
					<div class="group-price">￥{{detail.group_info.price}}</div>
					<div class="group-tips">发起拼单</div>
					
				</div>	
			</div>
			<div class="mui-col-xs-8 mui-row" v-else>
				<div class="mui-col-xs-6 cart" @tap="show_mask('cart')">加入购物车</div>	
				<div class="mui-col-xs-6 buy" @tap="show_mask('buy')">立即购买</div>	
			</div>
		</div>

		<div class="mask" v-if="showMask" @tap="showMask = false">
			<div class="mask-container" @tap.stop="showMask = true">
				<div class="mask-goods">
					<div class="goods-img">
						<img :src="detail.original_image" class="img-responsive" alt="">
					</div>
					<div class="goods-info">
						<div class="goods-price">￥{{goods_price}}</div>
						<div class="goods-store">库存{{goods_store}}件</div>
						<div class="spec-name" v-if="detail.spec.length > 0">{{spec_name}}</div>
					</div>
					<div class="close mui-pull-right" @tap.stop="showMask = false, order_group_id = ''"><i class="mui-icon mui-icon-close"></i></div>
				</div>

				<div class="mask-spec" v-if="detail.spec.length > 0">
					<div class="spec" v-for="specList in detail.spec">
						<div class="spec-title">{{specList.name}}</div>
						<div class="spec-items">
							<div class="spec-itme mui-pull-left" :class="specItem.select?'active':''" @tap="spec_click(specIndex, specList)" v-for="specItem, specIndex in specList.items">{{specItem.value}}</div>
							<div class="mui-clearfix"></div>
						</div>
					</div>
				</div>

				<div class="number">
					<div class="mui-pull-left number-tips">购买数量</div>
					<div class="mui-pull-right number-container">
						<div class="push mui-pull-right" @tap="pushNumber()">+</div>
						<div class="number-input mui-pull-right">
							<input type="number" v-model="number">
						</div>
						<div class="less mui-pull-right" @tap="lessNumber()">-</div>
					</div>
					<div class="mui-clearfix"></div>
				</div>

				<div class="mask-submit" v-if="opear_type == 'cart'" @tap="addCart()">加入购物车</div>
				<div class="mask-submit" v-else @tap="buy()">立即购买</div>
			</div>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<script>


		var detailVue = new Vue({
			el: '.detail',
			data: {
				detail: {
					spec:[],
					tags: [],
					group_info: {
						order: []
					}
				},
				id: "{$id}",
				number:1,
				spec_name: '请选择规格',
				goods_price: 0,
				goods_store: 0,
				price_id: '',
				showMask: false,
				opear_type: '',
				active_type: '',
				order_group_id:'',
			},
			mounted: function(){
				console.log('detail');
				console.log(apiUrl);
				this.getDetail();
			},
			methods:{
				//获取商品详情
				getDetail: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var that = this;
					var id = "{$id}";
					var url =  'goods/detail';
					request(that, {'url': url, 'data': {'id':id}}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.detail = res.data;
							if(res.data.active_type == 'spike') {
								that.goods_price = res.data.spike_info.price;
							} else if (res.data.active_type == 'group') {
								that.goods_price = res.data.group_info.price;
								if(res.data.group_info.order.length > 0) {
									$('.group-order').removeClass('mui-hidden');
								}
							} else {
								that.goods_price = res.data.shop_price;
							}

            				that.goods_store = res.data.store_count;
            				that.active_type = res.data.active_type;

            				that.orderSwiper();
							that.bannerSwiper();

							
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//单独购买
				one_buy: function(){
					this.active_type = 'normal';
					this.goods_price = this.detail.shop_price;
					this.show_mask('buy');
				},
				//立即购买
				buy: function(){
					if(this.detail.spec.length > 0 && !this.price_id) {
						mui.toast('请选择规格'); return false;
					}

					var str = '/mobile/order/confirmOrder?goods_id='+this.id+'&price_id='+this.price_id+'&number='+this.number+'&cart_ids=&type=goods&active_type='+this.active_type+'&address_id=&order_group_id='+this.order_group_id;
					location.href = str;
				},
				//加入购物车
				addCart: function(){

					//拼团商品，秒杀商品，押金商品，分期商品不能加入购物车
					if(this.active_type == 'group' || this.active_type == 'spike' || this.detail.goods_type != 1) {
						mui.toast('该商品不支付加入购物车'); return false;
					}


					if(this.detail.spec.length > 0 && !this.price_id) {
						mui.toast('请选择规格'); return false;
					}

					var id = this.id;
					var url =  'cart/addCart';
					var that = this;
					request(that, {'url': url, 'data': {
						'goods_id':id,
						'number': this.number,
						'price_id': this.price_id,
					}}, function(res){
						that.showMask = false;
						mui.toast(res.msg);
					},function(error){
						that.showMask = false;
						mui.toast(error.body.msg);
					});
				},

				//加入拼团
				addGroup: function(id) {
					this.order_group_id = id;
					this.show_mask('buy');
				},
				//图片轮播
				bannerSwiper:function(){
                    var bannerSwiper = new Swiper('.banner-container', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
						    el: '.banner-pagination',
						},
                    });
                },
                //拼单订单轮播
                orderSwiper:function(){
 						var swiper = new Swiper('.order-swiper', {
			      		direction: 'vertical',
			      		loop : true,
			      		observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
			      		autoplay:{
				      		delay: 5000,
			      		}
			    	}); 

 					var that = this;

	                if(this.detail.active_type == 'group' && this.detail.group_info.order.length > 0) {
	                   	setInterval( function () {
		                   	var order = that.detail.group_info.order;
				            order.forEach(function(item, index) {
				                var aaa = parseInt(item.end_time);
				                var tmp = Date.parse( new Date() ).toString();

								tmp = tmp.substr(0,10);

				                var rightTime = aaa - tmp;
				                if (rightTime > 0) {
				                    var dd = Math.floor(rightTime / 60 / 60 / 24);
				                    var hh = dd*60 + Math.floor((rightTime / 60 / 60) % 24);
				                    var mm = Math.floor((rightTime / 60) % 60);
				                    var ss = Math.floor(rightTime % 60);
				                }
				                var str = hh + ":" + mm + ":" + ss;
				                if(!item.obj_time) {
					                that.$set(item,'obj_time', str);
				                } else {
				                	item['obj_time'] = str;
				                }
				            })
				        }, 1000);
	                }
                },
                //收藏商品
                favorite: function(){
                	if(!token){
                		mui.toast('请先登录');
                		return;
                	}
					var url =  'favorite/add';
					var that = this;
					request(that, {'url': url, 'data': {
						'id':that.id,
						'type': 1,
					}}, function(res){
						mui.toast(res.msg);
						if(res.code == 200){
							that.detail.favorite = 1;
						}
					});
                },
                //取消收藏
                cancelFavorite: function(){
					var url =  'favorite/cancel';
					var that = this;
					request(that, {'url': url, 'data': {
						'id':that.id,
						'type': 1,
					}}, function(res){
						mui.toast(res.msg);
						if(res.code == 200){
							that.detail.favorite = 0;
						}
					});
                },
                //点击规格
                spec_click: function(specIndex, itemList){

                	var that = this;
            		itemList.items.forEach(function(it, ii){
            			if(ii == specIndex) {
            				if(it.select) {
            					it.select = !it.select;
            				} else {
		            			that.$set(it, 'select', true);
            				}		
            			} else {
	            			that.$set(it, 'select', false);
	            		}
            		});
            		this.check_spec_price();
                },
                //检测规格价格
                check_spec_price: function(){
                	var that = this;
                	var spec = that.detail.spec;
                	var spec_len = spec.length;
                	var checkNum = 0;
                	var spec_list = [];
                	spec.forEach(function(specList){
                		specList.items.forEach(function(item, index){
                			if(item.select) {
                				checkNum ++;
                				spec_list.push(item.id);
                			}
                		})
                	})
                	// console.log(spec_list);
                	spec_list.sort(function (x,y) {
				        return x-y;
				    })
                	var spec_key = spec_list.join('_');
                	var spec_price = that.detail.specPrice;
                	// console.log(checkNum);
                	if(that.active_type == 'spike') {
						that.goods_price = that.detail.spike_info.price;
	    				that.goods_store = that.detail.spike_info.store_count < that.detail.spike_info.limit_number ? that.detail.spike_info.store_count : that.detail.spike_info.limit_number;
					} else if (that.active_type == 'group') {
						that.goods_price = that.detail.group_info.price;
	    				that.goods_store = that.detail.store_count;
					} else {
						that.goods_price = that.detail.shop_price;
	    				that.goods_store = that.detail.store_count;
					}


    				that.spec_name = '请选择规格';
    				that.price_id = '';

                	if(checkNum == spec_len) {
                		// console.log('price')
                		console.log(spec_key);
                		spec_price.forEach(function(item, index){
                				// console.log(item);
                			if(item.key == spec_key) {
                				if(that.active_type != 'group' && that.active_type != 'spike') {
	                				that.goods_price = item.price;
                				}
                				that.goods_store = item.store_count;
                				that.spec_name = item.spec_name;
                				that.price_id = item.id;
                			}
                		})
                	}
                },
                //添加购买数量
                pushNumber: function() {
                	var that = this;
                	if(that.number < that.goods_store) {
                		that.number ++;
                	} else {
                		mui.toast('库存不足');
                	}
                },
                //减少购买数量
                lessNumber: function() {
                	var that = this;
                	if(that.number > 1) {
                		that.number --;
                	}
                },
                //显示加入购物车
                show_mask: function(opear_type){
                	if(!token) {
                		location.href = "{:url('user/login')}";
                		return;
                	}

                	if(opear_type == 'cart') {
                		//拼团商品，秒杀商品，押金商品，分期商品不能加入购物车
						if(this.active_type == 'group' || this.active_type == 'spike' || this.detail.goods_type != 1) {
							mui.toast('该商品不支付加入购物车'); return false;
						}
                	}

                	this.showMask = true;
                	this.opear_type = opear_type;
                },
                //到商家店铺 
                seller: function(id) {
                	location.href = '/mobile/seller/index/id/'+id;
                },
				//显示分享二维码
				show_share: function(){
					console.log('aaa');
					if(!token) {
                		location.href = "{:url('user/login')}";
                		return;
                	}


                	layer.open({
					    content: '<div class="share-box"><img class="img-responsive" src="http://qr.liantu.com/api.php?text='+this.detail.share_url+'"></div>'
					    ,btn: '长按图片保存'
					  });

				}
			}

		});
	</script>
{/block}